<template>
    <scroll ref="buyCart"
            @scroll="scroll"
            :listen-scroll="listenScroll"
            :probe-type="probeType">
      <div>
        <ul class="buy-cart" @touchstart="onTouchStartEvent">
          <li v-for="(items, index) in food" ref="cartGroup">
            <h3 class="item-sort">{{items.name}}<span>大家喜欢才是真的好</span></h3>
            <ul>
              <li class="cart-item" v-for="item in items.foods">
                <section class="item-content">
                  <!--<mu-paper class="demo-paper item-pic" :zDepth="2">-->
                    <img class="item-pic" src="../../../../static/img/food.jpeg" alt=""/>
                  <!--</mu-paper>-->
                  <div class="item-description">
                    <p class="item-name">{{item.name}}</p>
                    <span class="item-function">{{item.description}}</span>
                    <div class="item-price">
                      <p class="price">{{ item.price | currency('￥')}}</p>
                      <p><chose-btn @add="addFood" :food="item"></chose-btn></p>
                    </div>
                  </div>
                </section>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="list-fixed" ref="fixed" v-show="fixedTitle">
        <div class="fixed-title">{{fixedTitle}} </div>
      </div>
    </scroll>
</template>

<script>
    import Scroll from "../../../components/scroll/scroll";
    import {getData} from "../../../common/js/dom";
    import ChoseBtn from "./chose-btn";

    // html的fontsize大小
    const htmlFontSize = parseInt(document.getElementsByTagName('html')[0].style.fontSize)
    // 顶部fixed条的高度
    const TITLE_HEIGHT = parseFloat((60/75)*htmlFontSize)
    // 左侧快速导航条的每个元素的高度
    const ANCHOR_HEIGHT = 100

    export default {
      components: {
        ChoseBtn,
        Scroll},
      name: "buy-cart",
      props: {
        index: {
          type: Number,
          default: 0
        },
        data: {
          type: Array,
          default: null
        },
        food: {
          type: Array,
          default: null
        }
      },
      data () {
        return {
          scrollY: -1,
          diff: -1,
          currentIndex: 0
        }
      },
      created () {
        this.probeType = 3
        this.listenScroll = true
        this.touch = {}
        this.listHeight = []
      },
      mounted () {
        this._calculateHeight()
      },
      methods: {
        refresh() {
          this.$refs.buyCart.refresh()
        },
        scroll(pos) {
          this.scrollY = pos.y
        },
        onTouchStartEvent (e) {

        },
        _calculateHeight() {
          this.listHeight = []
          const list = this.$refs.cartGroup
          let height = 0
          this.listHeight.push(height)
          for (let i = 0; i < list.length; i++) {
            let item = list[i]
            height += item.clientHeight
            this.listHeight.push(height)
          }
        },
        addFood (target) {

        }
      },
      watch: {
        index (newval) {
          this.scrollY = -this.listHeight[newval]
          this.$refs.buyCart.scrollToElement(this.$refs.cartGroup[newval], 300)
        },
        data() {
          setTimeout(() => {
            this._calculateHeight()
            this.refresh()
          }, 20)
        },
        scrollY(newY) {
          const listHeight = this.listHeight
          // console.log(newY)
          // 当滚动到顶部，newY>0
          if (newY > 0) {
            this.currentIndex = 0
            return
          }
          // 在中间部分滚动
          for (let i = 0; i < listHeight.length - 1; i++) {
            let height1 = listHeight[i]
            let height2 = listHeight[i + 1]
            if (-newY >= height1 && -newY < height2) {
              this.currentIndex = i
              this.diff = height2 + newY
              return
            }
          }
          // 当滚动到底部，且-newY大于最后一个元素的上限
          this.currentIndex = listHeight.length - 2
        },
        diff(newVal) {
          let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
          if (this.fixedTop === fixedTop) {
            return
          }
          this.fixedTop = fixedTop
          this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
        }
      },
      computed: {
        fixedTitle () {
          if (this.scrollY > 0) {
            return ''
          }
          this.$emit('getCartIndex', this.currentIndex)
          return this.food[this.currentIndex].name
        }
      }
    }
</script>

<style scoped>
  .buy-cart{
    padding: 10px 20px 110px 20px;/*rem*/
    position: relative;
  }
  .buy-cart .cart-item{
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  .list-fixed{
    position: absolute;
    top: 0;/*rem*/
    left: 0;/*rem*/
    right: 0;/*rem*/
    font-size: 20px;/*px*/
    color: #666666;
    height: 60px;/*rem*/
    line-height: 60px;/*rem*/
    margin: 0 20px;/*rem*/
    border-bottom: 1px solid #f7f7f7;
    background-color: #ffffff;
  }
  .buy-cart .item-sort{
    font-size: 20px;/*px*/
    color: #666666;
    height: 60px;/*rem*/
    /*padding: 15px 0;*/
    line-height: 60px;/*rem*/
    border-bottom: 1px solid #f7f7f7;
  }
  .buy-cart .item-sort span{
    font-size: 18px;/*rem*/
    color: #999999;
    margin-left: 8px;/*rem*/
  }
  .item-content{
    display: flex;
    align-items: center;
  }
  .item-content .item-pic{
    height: 138px;/*rem*/
    width: 138px;/*rem*/
    margin-right: 18px;/*rem*/
  }
  .item-content .item-pic img{
    height: 100%;
    width: 100%;
  }
  .item-content .item-description{
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .item-description .item-name{
    font-size: 26px;/*px*/
    color: #333333;
  }
  .item-description .item-function{
    font-size: 18px;
    color: #767676;
    margin-top: 10px;/*rem*/
    max-width: 400px;/*rem*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .item-description .item-price{
    font-size: 22px;/*rem*/
    color: #ec6045;
    margin-top: 40px;/*rem*/
    display: flex;
    align-items: center;
  }
  .item-description .item-price .price{
    flex: 1;
  }
</style>
